<template>
  <div class="home">
    <!-- <div class="scroller">
      <list-item v-for="item in items" :key="item.id" :item="item" />
    </div> -->

    <!-- <recycle-scroller
      class="scroller"
      :items="items"
      :itemSize="54"
      v-slot="{ item }"
    >
      <list-item :item="item" />
    </recycle-scroller> -->

    <RecycleScroller
      class="scroller"
      :items="items"
      :item-size="54"
      key-field="id"
      v-slot="{ item }"
    >
      <div class="user">
        {{ item.id }}
      </div>
    </RecycleScroller>
  </div>
</template>

<script>
// @ is an alias to /src
// import RecycleScroller from "@/components/RecycleScroller.vue";
import ListItem from "@/components/ListItem.vue";
var items = [];
for (var i = 0; i < 10000; i++) {
  items.push({
    id: i + 1,
    count: i + 1,
  });
}
export default {
  name: "Home",
  components: {
    ListItem,
    // RecycleScroller,
  },
  data: () => ({
    items,
  }),
};
</script>

<style>
.scroller {
  width: 500px;
  margin: 0 auto;
  height: 500px;
  overflow: auto;
}
</style>
